<template>
    <div class="readHeaderContainer">
        <van-tabs v-model:active="active" swipeable>
            <van-tab v-for="item in titleArr" :title="item">
                <read-view :year="item" />
            </van-tab>
        </van-tabs>
        <div class="iconfont icon-sousuoxiao search-icon" @click="toSerachView"></div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "@vue/reactivity";
import { onBeforeMount } from "@vue/runtime-core";
import ReadView from "./read/readView.vue";
import { useRouter } from "vue-router"
let active = ref<number>(0)
let titleArr = ref<(string)[]>([])
const router = useRouter()
// 数据准备阶段
onBeforeMount(() => {
    let year = new Date().getFullYear()
    let time_titleList = ['   ']
    for (let i = year - 6; i <= year; i++) {
        time_titleList.unshift(i + '')
    }
    titleArr.value = time_titleList
})

let toSerachView = () => {
    router.push({ name: 'search' })
}
</script>

<style lang="less">
.readHeaderContainer {
    .van-tabs__line {
        display: none;
    }
    .van-tab {
        font-size: 18px;
        background: #dbdbdb;
        border-radius: 20px;
        margin: 8px;
        color: #fff;
    }
    .van-tab--active {
        background: #666;
    }
    .van-tabs__wrap {
        position: fixed;
        width: 100%;
        z-index: 100;
    }
}
</style>